<template>
  <van-overlay v-if="overlay" :show="show" style="background:white;z-index:100">
    <div class="wrapper">
      <div class="sk-cube-grid">
        <img class="sk-cube sk-cube1" src="http://www.sanye666.top/static/logoImage/1.png" />
        <img class="sk-cube sk-cube2" src="http://www.sanye666.top/static/logoImage/2.png" />
        <img class="sk-cube sk-cube3" src="http://www.sanye666.top/static/logoImage/3.png" />
        <img class="sk-cube sk-cube4" src="http://www.sanye666.top/static/logoImage/4.png" />
        <img class="sk-cube sk-cube5" src="http://www.sanye666.top/static/logoImage/5.png" />
        <img class="sk-cube sk-cube6" src="http://www.sanye666.top/static/logoImage/6.png" />
        <img class="sk-cube sk-cube7" src="http://www.sanye666.top/static/logoImage/7.png" />
        <img class="sk-cube sk-cube8" src="http://www.sanye666.top/static/logoImage/8.png" />
        <img class="sk-cube sk-cube9" src="http://www.sanye666.top/static/logoImage/9.png" />
      </div>
      <!-- <div class="spinner">
          <div class="dot1"></div>
          <div class="dot2"></div>
      </div>-->
    </div>
  </van-overlay>
  <van-overlay v-else :show="show" style="z-index:100">
    <div class="wrapper">
      <div class="sk-cube-grid">
        <img class="sk-cube sk-cube1" src="http://www.sanye666.top/static/logoImage/1.png" />
        <img class="sk-cube sk-cube2" src="http://www.sanye666.top/static/logoImage/2.png" />
        <img class="sk-cube sk-cube3" src="http://www.sanye666.top/static/logoImage/3.png" />
        <img class="sk-cube sk-cube4" src="http://www.sanye666.top/static/logoImage/4.png" />
        <img class="sk-cube sk-cube5" src="http://www.sanye666.top/static/logoImage/5.png" />
        <img class="sk-cube sk-cube6" src="http://www.sanye666.top/static/logoImage/6.png" />
        <img class="sk-cube sk-cube7" src="http://www.sanye666.top/static/logoImage/7.png" />
        <img class="sk-cube sk-cube8" src="http://www.sanye666.top/static/logoImage/8.png" />
        <img class="sk-cube sk-cube9" src="http://www.sanye666.top/static/logoImage/9.png" />
      </div>
      <!-- <div class="spinner">
          <div class="dot1"></div>
          <div class="dot2"></div>
      </div>-->
    </div>
  </van-overlay>
</template>

<script>
export default {
  name: "Load",
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    overlay: {
      type: Boolean,
      default: false,
    },
  },
  created() {},
};
</script>

<style scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 100;
}

.overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 99;
  background: white;
}
.sk-cube-grid {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  position: relative;
  bottom: 30px;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  /* background-color: rgba(146, 200, 255, 1); */
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

.spinner {
  margin: 100px auto;
  width: 90px;
  height: 90px;
  position: relative;
  text-align: center;

  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
}

.dot1,
.dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: rgba(146, 200, 255, 1);
  border-radius: 100%;

  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
</style>